<template>
    <el-dialog @opened="openDialog" :width="dialogWidth" :title="title" :visible.sync="showEditDialog"
        :show-close="false" :close-on-click-modal="false">
        <el-form :model="forms" :rules="rules" ref="editForms" class="edit-forms" label-position="left"
            :label-width="labelWidth">
            <el-form-item label="博客标题" prop="title">
                <el-input v-model="forms.title"></el-input>
            </el-form-item>
            <el-form-item label="博客第一段落" prop="content1">
                <el-input v-model="forms.content1"></el-input>
            </el-form-item>
            <el-form-item label="博客第二段落" prop="content2">
                <el-input v-model="forms.content2"></el-input>
            </el-form-item>
            <el-form-item label="博客第三段落" prop="content3">
                <el-input v-model="forms.content3"></el-input>
            </el-form-item>
            <el-form-item label="展示图片" prop="demoPicture">
                 <el-upload name="file" class="avatar-uploader" :action="serverApiUrl + '/file/addFile'" :show-file-list="false"
                    :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
                <img v-if="forms.url1" :src="forms.url1" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="侧边图片" prop="flankPicture">
                 <el-upload name="file" class="avatar-uploader" :action="serverApiUrl + '/file/addFile'" :show-file-list="false"
                    :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
                <img v-if="forms.url2" :src="forms.url2" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="发布时间" prop="issueTime">
                <el-input v-model="forms.issueTime"></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="tag">
                <el-input v-model="forms.tag"></el-input>
            </el-form-item>
            <el-form-item label="点击量" prop="hits">
                <el-input v-model="forms.hits"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {
    Required,
    Float2,
    Boolean,
    FillerFieldRules
} from "@/utils/validateRules";
import { serverApiUrl } from "@/config/apiUrl";
import { fillerLeft, resetObject } from "@/utils/common";
import { saveOrUpdateBlog, getBlogById,getBlog } from "@/api/blogManagement/list";
export default {
    props: {
        title: {
            type: String,
            default: "编辑"
        },
        dialogWidth: {
            type: String,
            default: "700px"
        },
        labelWidth: {
            type: String,
            default: "120px"
        },
        showEditDialog: Boolean
    },
    data() {
        return {
            forms: {
                blogId:"",
                title:"",
                content1:"",
                content2:"",
                content3:"",
                demoPicture:"",
                flankPicture:"",
                issueTime:"",
                tag:"",
                hits:"",
                url1:"",
                url2:""
            },
            // rules: {
            //     ...FillerFieldRules(["blogId"], Required),
            //     price: [Required, Float2],
            //     typeid: Boolean
            // },
            serverApiUrl: serverApiUrl,
          
        };
    },
    created() {
        this.initData(); //页面加载就初始化博客数据
    },
    methods: {
        // getTableData() {
        //     if(this.searchParams.blogId == null){
        //     getBlog({
        //         pageNo: this.pageNo,
        //         pageSize: this.pageSize
        //     }).then(resp => {
        //         this.tableData = resp.records;
        //         this.total = resp.total;
        //     })
        // }
        // else{
        //     getBlogById({
        //         pageNo: this.pageNo,
        //         pageSize: this.pageSize,
        //     }).then(resp => {
        //         this.tableData = resp.records;
        //         this.total = resp.total;
        //     })
        // }
        // },

        // initData() {
        //     getBlog()
        //         .then(r => {
        //             //获取博客列表
        //             this.BlogData = r;
        //         })
        //         .catch(() => { });
        // },
        submit() {
            this.$refs.editForms.validate(valid => {
                if (valid) {
                    this.$message({
                        message: "字段验证通过，提交请求，成功后刷新分页！",
                        type: "success"
                    });
                    // this.$emit("success"); //通知列表分页刷新
                    saveOrUpdateBlog(this.forms)
                        .then(r => {
                            this.$message({
                                message: r.msg,
                                type: "success"
                            });
                            this.$emit("success");
                            // this.$parent.refresh();
                            this.$parent.showEditDialog = false;
                            // location.reload();//数据和组件所有的刷新了，组件重构了，会影响
                        })
                        .catch(() => { });
                } else {
                    this.$message({
                        message: "请按照提示正确填写内容！",
                        type: "warning"
                    });
                    return false;
                }
            });
        },
        openDialog() {
            console.log(this.$parent.blogId);

            if (this.$parent.blogId != null) {
                //编辑
                getBlogById({ blogId: this.$parent.blogId })
                    .then(r => {
                        //根据id获取博客信息
                        this.FillerFormField(this.$parent.blogId, r);
                        this.forms.url1 = this.$parent.serverImageUrl + r.demoPicture;
                        this.forms.url2 = this.$parent.serverImageUrl + r.flankPicture;
                        this.$parent.blogId = null;
                    })
                    .catch(() => { });
            } else {
                //新增
                resetObject(this.forms);
                this.$set(this.forms, "blogId", null);
                this.$refs.editForms.resetFields();
            }
        },
        FillerFormField(blogId, data) {
            //可以外部填充回写做编辑用，也可以请求详情接口填充表单
            this.$set(this.forms, "blogId", blogId);
            fillerLeft(this.forms, data);
        },
        handleAvatarSuccess1(res, file) {
            console.log(res);
            // console.log(file);
            this.$message({
                type: "info",
                message: "图片上传成功",
                duration: 6000
            });
            if (file.status == "success") {
                this.forms.demoPicture = res.fileUrl; //上传图片成功之后保存图片的名称
                // this.forms.flankPicture = res.fileUrl; //上传图片成功之后保存图片的名称
                // console.log(res.fileUrl);
                this.forms.url1 = URL.createObjectURL(file.raw);
                // this.forms.url2 = URL.createObjectURL(file.raw);
            }
        },
        handleAvatarSuccess2(res, file) {
            console.log(res);
            // console.log(file);
            this.$message({
                type: "info",
                message: "图片上传成功",
                duration: 6000
            });
            if (file.status == "success") {
                // this.forms.demoPicture = res.fileUrl; //上传图片成功之后保存图片的名称
                this.forms.flankPicture = res.fileUrl; //上传图片成功之后保存图片的名称
                // console.log(res.fileUrl);
                // this.forms.url1 = URL.createObjectURL(file.raw);
                this.forms.url2 = URL.createObjectURL(file.raw);
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isGIF = file.type === "image/gif";
            const isPNG = file.type === "image/png";
            const isBMP = file.type === "image/bmp";
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
        }
    }
};
</script>
<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
